<template>
  <div class="w-full h-auto flex">
    <!-- start:显示背景图片和背景颜色 -->
    <VanImage :src="backGroundImageUrl" class="flex bg-contain bg-no-repeat blur-sm w-full"
      alt="background image alt" />
    <div class="absolute w-screen h-full bg-slate-500/70 dark:bg-slate-800/70">
      <div class="absolute left-0 bottom-5 flex flex-col w-full h-10 justify-center leading-5">
        <div class='text-lg font-black flex w-full mx-2' v-text="textContext"></div>
        <div class="text-xs mx-2 w-full flex h-20 inset-2" v-text="truncateString(textDecontext, 20)"></div>
      </div>
    </div>
    <!-- end:显示背景图片和背景颜色 -->
  </div>
</template>

<script lang="ts" setup>
defineProps<{ backGroundImageUrl: string, textContext: string, textDecontext: string }>();
/**
 * 根据给定的值长度过长的时候进行裁剪，如果过长则进行裁剪，如果过短则不进行裁剪
 * @param {string} params 字符串
 * @param {number} length 长度
 * @returns {string} 裁剪后的字符串或原字符串
 */
const truncateString = (params: string, length: number): string => {
  return params.length > length ? `${params.slice(0, length)}...` : params;
};
</script>

<style></style>